// 打包css
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js', // 输出的文件名
    path: path.resolve(__dirname, 'build'), // 输出的路径
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // style 将js中的样式  变成style标签插入到 head中
          'style-loader',
          // 将css文件变成commonjs模块加入到js中  里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less 转为css  
          // 需要要下载 less-loader less
          'less-loader'
        ]
      }
    ]
  },
  // 插件配置
  plugins: [
    // html-webpack-plugin 打包html
    // 需要自己的结构
    new HtmlWebpackPlugin({
      // 把这个作为模板  自动引入打包输出的所有资源
      template: './src/index.html'
    })
  ],
  mode: 'development',
  // mode: 'production'
}